<template>
  <!--  -->
  <div class="priview">
    <div class="priview-content" id="awardpreviewcontent">
      <div id="vippreviewchild">
        <h2>优秀工程奖申请</h2>

        <div class="flex priview-content-block">
          <h4>项目信息</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>工程项目名称</label>
                <span>{{data.engineeringName}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>申报奖项</label>
                <span>{{getApplyAward(data.applyAward)}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>实施时间</label>
                <span>{{data.startTime}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>项目产值总额</label>
                <span>{{data.totalAmount}}</span>
              </div>
            </div>
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>是否同意调整奖项</label>
                <span>{{data.isRevise === 'YES' ? '是' : '否'}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>成果类型</label>
                <span>{{getResultType(data.resultType)}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>截至时间</label>
                <span>{{data.endTime}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex  priview-content-block">
          <h4>申请单位信息</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>测绘资质等级及编号</label>
                <span>{{data.qualificationCode}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>法人代表</label>
                <span>{{data.legalRepresentative}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>通讯地址</label>
                <span>{{data.contactAddress}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>联系人</label>
                <span>{{data.contacts}}</span>
              </div>
            </div>
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>电子邮箱</label>
                <span>{{data.email}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>邮政编码</label>
                <span>{{data.postalCode}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>联系电话</label>
                <span>{{data.contactsPhone}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex  priview-content-block">
          <h4>工程项目介绍</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label-one">
                <label>工程项目主要内容、工作量</label>
                <span class="f">{{data.engineeringContent}}</span>
              </div>
              <div class="flex-row priview-label-one">
                <label>工程项目主要技术特点、工艺流程、性能指标、质保措施</label>
                <span>{{data.technologyInstructions}}</span>
              </div>
              <div class="flex-row priview-label-one">
                <label>验收单位、被检成果优良级品率</label>
                <span class="flexone">{{data.instructions}}</span>
              </div>
              <div class="flex-row priview-label-one">
                <label>成果检验机构的单位名称、检验方式、检验结论</label>
                <span>{{data.resultInstructions}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex  priview-content-block">
          <h4>完成人情况表
          </h4>
          <div class="flex-row" v-for="(mep, index) in data.mscsEngineeringPeople" :key="index">
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>姓名</label>
                <span>{{mep.username}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>职务/职称</label>
                <span>{{mep.position }}</span>
              </div>
            </div>
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>专业/专长</label>
                <span>{{mep.specialty}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>在项目中所起的作用</label>
                <span>{{mep.responsibility}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tc" style="margin-top: 20px;">
      <el-button type="success" round class="width-200" @click="html2pdf()">导出为pdf文件</el-button>
    </div>
  </div>
</template>

<script>
// import $ from 'jquery'
  export default {
    title: '优秀工程奖申请预览',
    name: 'award-perview',
    data () {
      return {
        data: {}
      }
    },
    beforeRouteEnter (to, from, next) {
     // 在渲染该组件的对应路由被 confirm 前调用
     // 不！能！获取组件实例 `this`
     // 因为当守卫执行前，组件实例还没被创建
     next(vm => {
       vm.data = to.query
       vm.data.mscsEngineeringPeople = JSON.parse(vm.data.mscsEngineeringPeople)
       vm.data.mscsEngineeringAttachments = JSON.parse(vm.data.mscsEngineeringAttachments)
     })
    },
    methods: {
      html2pdf () {
        this.$getPdf('awardpreviewcontent', '优秀工程奖申请表')
        // $("#vippreviewcontent").wordExport();
      },
      getApplyAward (str) {
        switch (str) {
          case 'GOLD':
            return '金奖'
            break;
          case 'SILVER':
            return '银奖'
            break;
          case 'BRONZD':
            return '铜奖'
            break;
        }
      },
      getResultType (str) {
        switch (str) {
          case 'DDCL':
            return '大地测量'
            break;
          case 'CHHKSY':
            return '测绘航空摄影'
            break;
          case 'SYCLYYG':
            return '摄影测量与遥感'
            break;
          case 'GCCL':
            return '工程测量'
            break;
          case 'DJCH':
            return '地籍测绘'
            break;
          case 'FCCH':
            return '房产测绘'
            break;
          case 'XZQYJXCH':
            return '行政区域界线测绘'
            break;
          case 'DLXXXTGC':
            return '地理信息系统工程'
            break;
          case 'DTBZ':
            return '地图编制'
            break;
          case 'DHDZDTZZ':
            return '导航电子地图制作'
            break;
          case 'HYCH':
            return '海洋测绘'
            break;
          case 'HLWDTFW':
            return '互联网地图服务'
            break;
          case 'QT':
            return '其他'
            break;
        }
      },
    }
  }
</script>
<style>
  .priview {
    background: #F2F6EB;
    color: #666666;
    padding: 60px 0;
  }
  .priview-content {
    width: 800px;
    margin: auto;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px 70px;
    box-shadow: #cccccc 0px 0px 2px 2px;
  }
  .priview h2 {
    text-align: center;
  }
  .priview h4 {
    color: #94C05A;
    font-size: 18px;
  }
  .flex-row {
    display: flex;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  .flexone {
    flex: 1;
  }
  .priview-label, .priview-label-one {
    margin-bottom: 20px;
  }
  .priview-label label {
    width: 150px;
  }
  .priview-label span {
    flex: 1;
  }
  .priview-label-one label {
    width: 150px;
  }
  .priview-label-one span {
    width: 510px;
    word-wrap: break-word;
    word-break: normal;
    line-height: 1.7;
  }
  .priview-content-block {
    margin-bottom: 20px;
  }
  .priview-content-block + .priview-content-block {
    border-top: 1px solid #deeacc;
  }
</style>
